<template>
	<view class="menu-list-item" @tap="handleLink(data.url)">
		<image :src="data.icon"></image>
		<view class="title">{{data.title}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: undefined
			},
		},
		data() {
			return {}
		},
		mounted() {},
		methods: {
			handleLink(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu-list-item {

		margin: 0 auto;
		text-align: center;
		// margin-top: 24rpx;

		>image {
			height: 84rpx;
			width: 84rpx;
		}

		.title {
			margin-top: 4rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
</style>